import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams,Content,AlertController } from 'ionic-angular';

//服务
import { StorageProvider } from '../../providers/storage/storage';

//网络请求
import { ConfigProvider } from '../../providers/config/config';
import { HttpserviesProvider } from '../../providers/httpservies/httpservies';
import { Http,Jsonp } from '@angular/http';

/**
 * Generated class for the SearchPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
})
export class SearchPage {

  //装饰器    this.content.scrollToTop();回到顶部
  @ViewChild(Content) content: Content;

  public historyList = []; //历史数据容器
  public list = [];        //接收数据容器
  public flag = true;      //默认是true， 显示搜索数据， 点击搜索展示商品数据
  public keywords = '';    //双向数据绑定，标识符
  public page = 1;         //请求页码
  public hasData = true;   //是否有数据

  constructor(public navCtrl: NavController, public navParams: NavParams, public config: ConfigProvider, public httpServies: HttpserviesProvider,public storage:StorageProvider,public alertCtrl: AlertController) {

    //构造函数中获取历史记录数据
    this.getHistoryData();
  
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SearchPage');
  }

  //获取搜索列表数据
  getSearchListData(ionInfinite){
    if(!ionInfinite){//点击搜索按钮
      this.page = 1; //将页码重新为初始化1;
      this.hasData = true;
      this.content.scrollToTop(0);//回到顶部
      this.saveHistoryData();     //保存历史记录
    }

    //网络请求列表数据
    //http://39.108.159.135/api/plist?search=%E7%94%B5%E8%84%91&page=1
    var url = 'api/plist?search='+this.keywords+'&page='+this.page;
    this.httpServies.requestData(url, (data)=>{

      if(ionInfinite){ //加载更多数据， 将请求到的数据拼接起来
        this.list = this.list.concat(data.result);
      }else{           //直接点击搜索按钮，请求第一页的数据
        this.list = data.result;
      }

      this.flag = false;

      if(ionInfinite){
        ionInfinite.complete(); //加载完成

        if(data.result.length < 10){
          this.hasData = false;
        }
      }
      this.page++;  //页码+1;
    });
  }

  //上拉加载更多数据
  doMoreLoadData(ionInfinite){
    this.getSearchListData(ionInfinite);
  }

  //点击历史搜索记录
  clickHistorySearch(keywords){
    this.keywords = keywords;
    this.getSearchListData('');
  }

  //保存历史记录
  saveHistoryData(){
    //1.获取历史记录
    var history = this.storage.get('historyData');

    //2.判断历史记录是否存在
    if(history){
      if(history.indexOf(this.keywords)==-1){
        //不存在相同的历史记录，重新写入
        history.push(this.keywords);
        this.storage.set('historyData',history);
      }
    }else{//不存在历史记录，直接将搜索的关键字push到历史记录中，
      this.historyList.push(this.keywords);
      this.storage.set('historyData',this.historyList);
    }
  }

  //获取历史记录
  getHistoryData(){
    var history = this.storage.get('historyData');
    if(history){
      this.historyList = history;
    }
  }

  //删除历史记录
  removeHistoryData(keywords){
    let confirm = this.alertCtrl.create({
      title: '您确定要删除吗?',
      message: '您确定要删除这条历史记录吗，确定点击是，否则点击否。',
      buttons: [
        {
          text: '否',
          handler: () => {
            // console.log('Disagree clicked');
          }
        },
        {
          text: '是',
          handler: () => {
            var index = this.historyList.indexOf(keywords);
            this.historyList.splice(index, 1);
            //重新写入localStorage 
            this.storage.set('historyData',this.historyList);
          }
        }
      ]
    });
    confirm.present();
  }
}
